<template>
  <div class="rotation">
    <el-carousel :interval="5000" height="58vh" arrow="always">
      <el-carousel-item v-for="url in imgs1" :key="url">
        <el-image :src="url" fit="contain"></el-image>
      </el-carousel-item>
    </el-carousel>

    <div class="input">
      <h1>感无上天道，品大美人生</h1>
      <h5>ZhaoYu's Graduation Project</h5>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs1: [
        "./static/img/8S5A0171_0790d2b0-2166-4430-a403-48a1db35eac6_1728x.jpg",
        "./static/img/8S5A0250_1728x.jpg",
        "./static/img/8S5A9963_1728x.jpg",
      ],
    };
  }, // data
};
</script>

<style lang="scss" scoped>
.rotation {
  position: relative;
}
/deep/ img {
  filter: brightness(90%);
}
.input {
  position: absolute;
  top: 50%;
  left: 90px;
  transform: translate(0, -50%);
  z-index: 2;
  text-align: left;
  h1 {
    color: #fff;
    letter-spacing: 0.2rem;
  }
  h5 {
    color: #fff;
    margin-top: 10px;
    word-spacing: .4rem;
    letter-spacing: .1rem;
  }
}
</style>